import { Table, Modal, Space, Form, Input, Radio, Image } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import { dele, findById } from "../../../services/user"
import { setUpdateVisible, fetchUser } from "../../../store/slice/userSlice"
import { useDispatch } from "react-redux"
const { confirm } = Modal;


export default function (props) {
  let dispatch = useDispatch()
  const [form] = Form.useForm();
  const [fields, setFields] = useState([])
  const [getImg, setGetImg] = useState("")

  //删除数据
  const delet = async (id) => {
    confirm({
      title: 'Are you sure delete this ?',
      icon: <ExclamationCircleOutlined />,
      content: '三思而后行',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      async onOk() {
        await dele(id)
        props.show()
      },
    });
  }

  //详情弹出框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };


  const details = async (id) => {
    setIsModalOpen(true);
    let res = await findById(id)
    setGetImg(res)
    let arry = [];
    let  arryNum=[]
    let getCoupons=""
    let nums=""
    res.coupons.forEach(item => {
      arry.push(item.neme)
      arryNum.push(item.num)
      console.log(arry);
       getCoupons = arry.slice(',')
      nums=arryNum.splice(',')
    });
    form.setFieldsValue({...res,couponsName:getCoupons,couponsNum:nums})
  }

  //修改
  const putClick = (id) => {
    console.log(id);
    dispatch(fetchUser(id))
    dispatch(setUpdateVisible(true))
  }

  //分页
  const handleChange = (pagination) => {
    console.log(pagination)
    props.show({
      current: pagination.current,
      pageSize: pagination.pageSize
    });
  }

  const columns = [
    {
      title: '昵称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '会员积分',
      dataIndex: 'integral',
      key: 'integral',
    },

    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { delet(record._id) }}>删除</a>
          <a onClick={() => { putClick(record._id) }}>修改</a>
          <a onClick={() => { details(record._id) }}>查看详情</a>
        </Space>
      ),
    },
  ];

  return <div>
    <Table bordered columns={columns} dataSource={props.users} pagination={props.pagination} onChange={handleChange}></Table>
    <div>
      <Modal title="详细信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          name="basic"
          // fields={fields}
          form={form}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 10,
          }}
          initialValues={{
            remember: true,
          }}
          autoComplete="off"
        >
          <Form.Item
            label="昵称"
            name="name"

          >
            <Input />
          </Form.Item>

          <Form.Item
            label="用户名"
            name="username"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="pwd"

          >
            <Input />
          </Form.Item>

          <Form.Item
            label="性别"
            name="gender"
          >
            <Radio.Group >
              <Radio value={"男"}>男</Radio>
              <Radio value={"女"}>女</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            label="生日信息"
            name="birth"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="联系电话"
            name="phone"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="会员积分"
            name="integral"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="优惠券名称"
            name="couponsName"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="优惠券数量"
            name="couponsNum"
          >
            <Input type='number' style={{ width: "100px" }} />
          </Form.Item>


          <Form.Item
            label="收货地址"
            name="address"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="图片"
            name="headImg"
          >
            <Image
              width={120}
              src={"http://localhost:3000/images/" + getImg.headImg}
            />
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
          </Form.Item>
        </Form>
      </Modal>
    </div>
  </div>
}
